
    <div class="layui-col-xs12">
    	<div class="layui-card">
    		<div class="layui-card-header">
      			<h2>海报图设置</h2>	
      		</div>
      		<div class="layui-card-body">
		      <form action="" class="layui-form">
		      	
		      	<button type="button" class="layui-btn" onclick="add()" >
				  <i class="layui-icon">&#xe67c;</i>添加
				  
				</button>
				<p class="picTip">注册广告图建议大小(宽<span>750px</span> 高<span>1334px</span>)</p>
		      	
		      	<table class="layui-table" style="table-layout:fixed" lay-size="lg">
		      		<colgroup>
						    <col width="850">
						    <col width="150">
						    <!--<col width="50">-->
						  </colgroup>
				      <tbody class="mainBody">
				      	<tr>
				      		<th style="text-align: center;">图片</th>
				      		<th style="text-align: center;">图片类型</th>
				      		<th style="text-align: center;">操作</th>
				      	</tr>
				      	
					    <!--<tr>
					      <td class="prodDe_td"></td>
					      <td>
					      	<select name="show" lay-verify="required">
					      		<option value="1">注册广告图</option> 
					      		<option value="2">分享广告图</option> 
					      	</select>
					      	
					      </td>
					    	<td class="del" width="300px">
					    		<div class="addPic">
					    			<p class="picTip">建议大小(宽<span>750px</span> 高<span>1334px</span>)</p>
					    			<input type="file" class="detail_input" style="display: none;" onchange="uploadPhoto3(this)">   
				      						
				      							<button type="button" class="layui-btn" id="test1" onclick="coverDetail()">
														  <i class="layui-icon">&#xe67c;</i>添加图片
														</button>
									</button>
									
					    		</div>
					    		
								<button class="layui-btn layui-btn-danger delDeImg" type="button">删除</button>
					    	</td>
					    </tr>-->
					    
					    <!--<tr>
					      <td class="prodDe_td">
					      	<label for="fhPicSub" class="addLogo">
      							<img src="img/addImg.png" class="fhImg" style="width: 100px;height: 100px;" />
      						</label>
      						<input type="file" id="fhPicSub" onchange="uploadPhoto2(this)" style="display: none;" />
					      </td>
					      <td>
					      	<select name="show" lay-verify="required">
					      		<option value="1">注册广告图</option> 
					      		<option value="2">分享广告图</option> 
					      	</select>
					      	
					      </td>
					    	<td class="del" width="300px">
								<button class="layui-btn layui-btn-danger delDeImg" type="button">删除</button>
					    	</td>
					    </tr>-->
					    
					    
					    
					    
					    
					  </tbody>
				      	
			      </table>
			      <!--<div class="save">
			      	<button class="layui-btn saveBtn" type="button">保存</button>
			      </div>-->
			      
		      	
		      </form>
      

      
      </div>
      </div>
      
    </div>
    
    <script type="text/javascript">
    	let delDeImg = document.querySelector(".delDeImg");
    	let prodDe_td = document.querySelector(".prodDe_td");
    	let _obj = "";
//  	let saveBtn = document.querySelector(".saveBtn");
    	let mainBody = document.querySelector(".mainBody");
    	let isAdd = false;
    	let photos = [];
    	
    	
    	function uploadPhoto2(file) {
		    console.log(file.files[0])
		
		    var data = new FormData();
		    data.append("file", file.files[0]);
		    
		
		    $.ajax({
		      url:DBHelper.host+'/api/ImgUpload?MemLoginId=admit&ImagesType=',
		      type: 'POST',
		      dataType: 'JSON',
		      data: data,
		      beforeSend: function(request) {
					            
					            request.setRequestHeader("Authorization", 'bearer ' + localStorage.getItem("token"));
					        },
		      cache: false,
		      processData: false,
		      contentType: false,
		      beforeSend: function(request) {
		          request.setRequestHeader("Authorization", 'bearer ' + DBHelper.getToken());
		          loadingImg()
		      },
					success:function(res){
						console.log(555,file.parentNode.children[0])
						file.parentNode.children[0].setAttribute("src",res.Url);
//						let fhImg = document.querySelector(".fhImg");
//						console.log(res.Url)
//						fhImg.setAttribute("src",res.Url)
						photo = res.Url;
						$('.loading').remove()
					},
					error:function(res){
						$('.loading').remove()
					}
		    })
		  }
    	
    layui.use(['jquery', 'mockjs', 'table', 'sidebar', 'form','route'], function () {
		var $ = layui.jquery,
      layer = layui.layer,
      table = layui.table,
      sidebar = layui.sidebar,
      route = layui.route,
      params = route.params(),
      form = layui.form;
    
    
    
    	addAll();
    	
    	function addAll(){
    		DBHelper.GetA("Admin_Xn_AdvertisementImage",function(data){
    			console.log(1,data)
    			data.forEach((el,index)=>{
    				let t = document.createElement('tr');
					t.innerHTML=`<td class="prodDe_td" style="text-align:center">
								      	<img src="${el.Url}" id="${el.ID}" class="fhImg" style="width: 100px;height: 100px;" onclick="shangchuan(this)" />
      									<input type="file" id="fhPicSub" onchange="uploadPhoto2(this)" style="display: none;" />
								      </td>
								      <td>
								      	<select name="show" lay-verify="required" lay-filter="leixing">
								      		<option value="1">注册广告图</option> 
								      		<option value="2">分享广告图</option> 
								      	</select>
								      	
								      </td>
								    	<td class="del" style="text-align:center">
											<button class="layui-btn layui-btn-danger delDeImg" type="button" onclick="del(this)">删除</button>
											<button class="layui-btn saves" type="button" onclick="save(this)">保存</button>
								    	</td>
								    	`
					mainBody.appendChild(t)
//					t.find("option[value='"+el.ConfigType+"']").prop("selected",true);
					
					console.log(123,t.children[1].children[0])
					let ss = t.children[1].children[0].options;
//					ss.find("option[value='"+el.ConfigType+"']").prop("selected",true);
					console.log(ss,0)
					for(let i = 0;i<ss.length;i++){
						console.log(ss[i].value)
						if(ss[i].value==el.ConfigType){
							ss[i].selected = true;
						}
					}
					renderForm()
    			})
    		})
    		
    		
				
				
    	}
    	
    	form.on('select(leixing)',function(data){
    		console.log(data.elem)
	      })
    	
    	
    		function coverDetail(){
				$('.detail_input').click()
			}
    	
    	function uploadPhoto2(file) {
		    console.log(file.files[0])
		
		    var data = new FormData();
		    data.append("file", file.files[0]);
		    
		
		    $.ajax({
		      url:DBHelper.host+'/api/ImgUpload?MemLoginId=admit&ImagesType=',
		      type: 'POST',
		      dataType: 'JSON',
		      data: data,
		      beforeSend: function(request) {
					            
					            request.setRequestHeader("Authorization", 'bearer ' + localStorage.getItem("token"));
					        },
		      cache: false,
		      processData: false,
		      contentType: false,
		      beforeSend: function(request) {
		          request.setRequestHeader("Authorization", 'bearer ' + DBHelper.getToken());
		          loadingImg()
		      },
					success:function(res){
						console.log(file.parentNode.children[0])
//						let fhImg = document.querySelector(".fhImg");
//						console.log(res.Url)
//						fhImg.setAttribute("src",res.Url)
//						photo = res.Url;
						$('.loading').remove()
					},
					error:function(res){
						$('.loading').remove()
					}
		    })
		  }
    	
    	
//  	DBHelper.Get("Admin_Xn_AdvertisementImage?id=1",function(data){
//		   	console.log(data)
//		   	_obj = data;
////		   	data.forEach((el,index)=>{
////		   		prodDe_td.innerHTML += `
////					<div class="prodDe_check">
////						<img src="${data.Url}" style="width: 100px;height: 100px;margin-bottom:20px;" />
////						<input type="checkbox" name="prodDe_check" lay-skin="primary" value="${data.Url}">
////					</div>
////					
////					`
////					photos.push(data.Url);
////		   	})
//				if(data.Url!=null){
//					if(data.Url.includes("|")){
//						photos = data.Url.split("|");
//						
//					}else{
//						photos.push(data.Url)
//					}
//					
//				}
//				console.log(photos)
//				photos.forEach((el,index)=>{
//		   		prodDe_td.innerHTML += `
//					<div class="prodDe_check">
//						<img src="${el}" style="width: 100px;height: 100px;margin-bottom:20px;" />
//						<input type="checkbox" name="prodDe_check" lay-skin="primary" value="${el}">
//					</div>
//					
//					`
////					photos.push(data.Url);
//		   	})
//				console.log(photos)
//				renderForm();
//				
//		   },function(data){
//		   	console.log(data)
//		   })
    	
    	renderForm();
    	
    	//	多图添加
//	删除按钮,修改delDeImg和prodDe_check
//	delDeImg.addEventListener("click",function(){
//		
//			$.each($('input[name="prodDe_check"]:checked'),function(){
//				photos.splice(photos.indexOf($(this).val()),1)
//				console.log("$(this)",$(this).parent().remove())
//				console.log("photos",photos)
//			})
////			console.log(photos)
//	})
	
//	saveBtn.addEventListener("click",function(){
//		console.log("photos",photos)
//		_obj.Url = jointPic(photos);
//		console.log("_obj.Url",_obj.Url)
//		
//		DBHelper.Put("Admin_Xn_AdvertisementImage?id=1",_obj,function(data){
//			console.log(data)
//			location.href = window.location.href
//		},function(data){
//			console.log(data)
//		})
//	})
	
//	每一个多图上传的方法都不一样,回调函数内容不一样
	function uploadPhoto3(file) {
    console.log(file.files[0])

    var data = new FormData();
    data.append("file", file.files[0]);
    

    $.ajax({
      url:DBHelper.host+'/api/ImgUpload?MemLoginId=admit&ImagesType=',
      type: 'POST',
      dataType: 'JSON',
      data: data,
      cache: false,
      processData: false,
      contentType: false,
      beforeSend: function(request) {
          request.setRequestHeader("Authorization", 'bearer ' + DBHelper.getToken());
          loadingImg()
      },
		success:function(res){
//				let fhImg = document.querySelector(".fhImg");
//				console.log(res.Url)
//				fhImg.setAttribute("src",res.Url)
//				photo = res.Url;
//				prodBg.setAttribute("src",res.Url)
			prodDe_td.innerHTML += `
			<div class="prodDe_check">
				<img src="${res.Url}" style="width: 100px;height: 100px;margin-bottom:20px;" />
				<input type="checkbox" name="prodDe_check" lay-skin="primary" value="${res.Url}">
			</div>
			
			`
			renderForm();
			photos.push(res.Url);
			$('.loading').remove()
//					console.log(res)
			console.log(photos)
		},
		error:function(res){
			$('.loading').remove()
		}
    })
  }
//	将图片转换成json串
	function jointPic(arr){
		let sum = '';
		arr.forEach((el,index)=>{
			sum += el+"|"
		})
		sum = sum.substring(0,sum.length-1)
		return sum;
	}
	
//	多图添加结束


})



//添加数据
function add(){
	if(!isAdd){
		isAdd=true;
		console.log(1,"成功")
		let tr = document.createElement('tr');
		tr.innerHTML=`<td class="prodDe_td" style="text-align:center">
					      	
      						<img src="img/addImg.png" class="fhImg" style="width: 100px;height: 100px;" onclick="shangchuan(this)" />
      						<input type="file" id="fhPicSub" onchange="uploadPhoto2(this)" style="display: none;" />
					      </td>
					      <td>
					      	<select name="show" lay-verify="required" lay-filter="leixing">
					      		<option value="1">注册广告图</option> 
					      		<option value="2">分享广告图</option> 
					      	</select>
					      	
					      </td>
					    	<td class="del" style="text-align:center">
								<button class="layui-btn layui-btn-danger delDeImg" onclick="del(this)" type="button">删除</button>
								<button class="layui-btn saves" type="button" onclick="save(this)">保存</button>
					    	</td>`
		mainBody.appendChild(tr)
		renderForm()
		
	}
	
	
}



function shangchuan(obj){
	console.log(obj.parentNode.children[1])
	obj.parentNode.children[1].click()
}

function select(){
	console.log(1)
}
function del(obj){
	console.log(obj)
	let sid = obj.parentNode.parentNode.children[0].children[0].getAttribute("id");
	console.log("sid",sid)
	let index = layer.confirm('确认删除？',function(){
						_obj.ID = sid;
						DBHelper.Delete("Admin_Xn_AdvertisementImage?id="+sid,"",function(data){
							console.log(data)
							
							layer.close(index)
							location.href = window.location.href
						},function(data){
							location.href = window.location.href
						})
						layer.close(index)
					})
}
function save(obj){
	
	let sid = obj.parentNode.parentNode.children[0].children[0].getAttribute("id");
	console.log("pic",obj.parentNode.parentNode.children[0].children[0].getAttribute("src"))
	console.log("选项",obj.parentNode.parentNode.children[1].children[0].value)
	let _obj = {};
	if(obj.parentNode.parentNode.children[0].children[0].getAttribute("src")=="img/addImg.png"){
		_obj.Url = ""
	}else{
		_obj.Url = obj.parentNode.parentNode.children[0].children[0].getAttribute("src");
	}
	
	_obj.ConfigType = obj.parentNode.parentNode.children[1].children[0].value;
	_obj.value = "#"
	console.log(6666666666,_obj)
	let index = layer.confirm('确认保存？',function(){
		if(sid==null){
			DBHelper.Post("Admin_Xn_AdvertisementImage",_obj,function(data){
				console.log(data)
				layer.close(index)
				location.href = window.location.href
			})
		}else if(sid!=null){
			console.log(sid)
			_obj.ID = sid;
			DBHelper.Put("Admin_Xn_AdvertisementImage?id="+sid,_obj,function(data){
				console.log(data)
				
				layer.close(index)
				location.href = window.location.href
			})
			layer.close(index)
		}
		
//						DBHelper.Post("Admin_Xn_AdvertisementImage",function(data){
//							layer.close(index)
//						})
						layer.close(index)
					})
}

function renderForm(){
			  layui.use('form', function(){
			   var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
			   form.render();
			  });
			}
    	
    	
    	
    	renderForm();
    </script>

      <style scoped>
      	.picTip{
      		color: black;
      		font-size: 12px;
      	}
      	.prodDe_check{
					width: 100px;
					padding: 12px;
					text-align: center;
					display: inline-block;
					/*border: 1px solid black;*/
				}
				.save{
					width: 100%;
					text-align: center;
				}
				.saveBtn{
					display: inline-block;
					width: 200px;
					margin-top:10px;
					
				}
      	.addPic{
      		display: inline-block;
      	}
      	.title{
      		margin-left: 30px;
      		margin-top: 30px;
      	}
      	.addPic{
      		margin-top: 10px;
      		margin-left: 20px;
      		margin-right: 10px;
      	}
      	.del{
      		color: red;
      	}
      	
      </style>